<template>
  <view class="flex-table">
    <view class="flex-tr">
      <view class="flex-td--label">申请单位</view>
      <view class="flex-td--value flex-center" style="width: 220px; flex: none">{{ ticket.applyUnitName }}</view>
      <view class="flex-td--label">作业单位</view>
      <view class="flex-td--value flex-center" style="width: 220px; flex: none">{{ ticket.unitName }}</view>
      <view class="flex-td--label">作业负责人</view>
      <view class="flex-td--value" style="display: block">
        <image
          v-for="imgItem in operationManagerSignatures"
          :key="imgItem"
          :src="`${staticUrl}${imgItem}`"
          mode="aspectFill"
          class="signature__img"
          @click="handlePreviewImage(`${staticUrl}${imgItem}`, operationManagerSignatures)"
        ></image>
      </view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label">涉及相关单位(部门)</view>
      <view class="flex-td--value flex-center" style="width: 550px; flex: none">{{ detail.referredDeptLabel }}</view>
      <view class="flex-td--label">监护人</view>
      <view class="flex-td--value" style="display: block">
        <image
          v-for="imgItem in guardianSignatures"
          :key="imgItem"
          :src="`${staticUrl}${imgItem}`"
          mode="aspectFill"
          class="signature__img"
          @click="handlePreviewImage(`${staticUrl}${imgItem}`, guardianSignatures)"
        ></image>
      </view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label">断路原因</view>
      <view class="flex-td--value flex-center">{{ detail.breakReason }}</view>
    </view>

    <view class="flex-tr">
      <view class="flex-td--label">关联的其他特殊作业及安全作业票编号</view>
      <view class="flex-td--value flex-center">{{ relevanceTicketLabel }}</view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--value" style="line-height: 24px; border-left: 1px solid #124264">
        <view>断路地段示意图（可另附图）及相关说明：</view>
        <view>
          {{ detail.breakLocation }}
        </view>
        <view v-if="detail.image">
          <image
            :src="`${staticUrl}${detail.image}`"
            mode="aspectFill"
            class="complete__img"
            @click="handlePreviewImage(`${staticUrl}${detail.image}`)"
          ></image>
        </view>
        <view class="flex items-center">
          <text>签字：{{ detail.creatorLabel }}</text>
          <image
            v-for="imgItem in operatorAcceptConfessionsSignatures"
            :key="imgItem"
            :src="`${staticUrl}${imgItem}`"
            mode="aspectFill"
            class="signature__img"
            @click="handlePreviewImage(`${staticUrl}${imgItem}`, operatorAcceptConfessionsSignatures)"
          ></image>
          <text v-if="inspect && inspect[actNodeTypeEnum.JSJD]" style="margin-left: 100px">
            {{ $u.timeFormat(inspect[actNodeTypeEnum.JSJD][0].createTime, 'yyyy 年 mm 月 dd 日 hh 时 MM 分') }}
          </text>
        </view>
      </view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label">风险辨识结果</view>
      <view class="flex-td--value flex-center">{{ ticket.riskIdentificationResultLabel }}</view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label">作业实施时间</view>
      <view class="flex-td--value flex-center">{{ actualDateLabel }}</view>
    </view>
  </view>
</template>
<script>
import ticketTableMixin from './ticketTableMixin'
import { actNodeTypeEnum } from '@/utils/constant'
export default {
  computed: {
    actNodeTypeEnum() {
      return actNodeTypeEnum
    }
  },
  mixins: [ticketTableMixin],
  props: {
    ticketId: [Number, String],
    detail: {
      type: Object,
      default: () => ({})
    },
    inspect: {
      type: Object,
      default: () => ({})
    },
    signatures: {
      type: Array,
      default: () => []
    },
    ticket: {
      type: Object,
      default: () => ({})
    },
    relevanceTicketLabel: String,
    riskIdentificationResult: String,
    actualDateLabel: String
  }
}
</script>
<style scoped lang="scss">
@import './style.scss';
</style>
